<template>
    <div class="bigbox">
        <div v-for="({image,tit,txt},index) in list" :key="index" class="box">
            <div>
                <img v-bind:src="image" width="200px">
            </div>
            <div>
                <h4>{{ tit }}</h4>
                <p v-text="txt"></p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            //做数据
            list:[
                {image:'http://www.jz5158.cn/static/images/books/%E7%AD%B9%E7%A0%81%E5%BA%95%E7%89%8C%E7%B3%BB%E7%BB%9F.png',tit:'机智北上资金流',txt:'内部算法统计筹码盈亏比例，套牢盘获利盘一目了然'},
                {image:'http://www.jz5158.cn/static/images/books/%E7%AD%B9%E7%A0%81%E5%BA%95%E7%89%8C%E7%B3%BB%E7%BB%9F.png',tit:'机智北上资金流',txt:'内部算法统计筹码盈亏比例，套牢盘获利盘一目了然'},
                {image:'http://www.jz5158.cn/static/images/books/%E7%AD%B9%E7%A0%81%E5%BA%95%E7%89%8C%E7%B3%BB%E7%BB%9F.png',tit:'机智北上资金流',txt:'内部算法统计筹码盈亏比例，套牢盘获利盘一目了然'},
                {image:'http://www.jz5158.cn/static/images/books/%E7%AD%B9%E7%A0%81%E5%BA%95%E7%89%8C%E7%B3%BB%E7%BB%9F.png',tit:'机智北上资金流',txt:'内部算法统计筹码盈亏比例，套牢盘获利盘一目了然'},
            ]
        }
    }
}
</script>

<style lang="scss">
*{
    margin: 0;
    padding: 0;
}
.bigbox{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    .box{
        display: flex;
        width: 50vw;
    }
}
</style>